<template>
  <div>
    <!-- banner -->
    <div class="bannerBox">
      <!-- 上一页的图标 -->
      <div class="icons" style="left: 10px" @click="handlePrev">
        <a-icon type="left" />
      </div>
      <a-carousel arrows ref="carousel" autoplay>
        <img
          :src="baseUrl.BASEURL + i.path"
          class="bannerImg"
          v-for="(i, k) in bannerList"
          :key="k"
        />
      </a-carousel>
      <!-- 下一页图标 -->
      <div class="icons" style="right: 10px" @click="handleNext">
        <a-icon type="right" />
      </div>
    </div>
    <!-- 规则说明 -->
    <div class="announcement_box">
      <div class="maxWidth flexLeft">
        <!-- 公告图 -->
        <img
        src="../assets/images/index/announcement.png"
        class="announcement_img marR18"
        @click="getGuideInfo"
        />
        <!-- 公告 -->
        <div class="announcement_txt_box">
          <!-- 公告标题 -->
          <div class="flexBet padR16">
            <div class="marL21 announcement fontS24 fonBold posR">公告</div>
            <div @click="moreall" class="fontS18 moreall">更多 +</div>
          </div>
          <!-- 公告内容 -->
          <div class="announcement_txt padB15">
            <div
              @click="getNoticeDetail(i.noticeId)"
              v-for="(i, k) in announcementList"
              :key="k"
              class="msglist"
            >
              <div class="leftbox">
                <div class="toptime">{{ i.createTime | setCreateTime }}</div>
                <!-- <div class="btmtime"></div> -->
              </div>
              <div class="rigthbox overstep" :title="i.noticeTitle">
                {{ i.noticeTitle }}
                <!-- <div>测试公告</div> -->
              </div>
              <div class="rightbtn">
                <div class="btnmsg">查看详情</div>
              </div>
            </div>

            <!-- <div
              class="flexBet announcement_txt_item padB8 padT18 colorAE fontS17"
              v-for="(i, k) in announcementList"
              :key="k"
              @click="getNoticeDetail(i.noticeId)"
            >
              <a-tooltip placement="topLeft" :title="i.noticeTitle">
                <div class="marL10 overstep flex1">{{ i.noticeTitle }}</div>
              </a-tooltip>
              <p>{{ i.createTime | setCreateTime }}</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 项目申报 -->
    <div class="padT23 maxWidth padB35">
      <h3 class="fontS30 fonBold xmsb">项目申报</h3>
      <div class="flexBet flexWrap marT40">
        <!-- 申报项目 -->
        <div
          class="project_item_box flexLeft posR marB40"
          v-for="(i, k) in projectList"
          :key="k"
          @click="projectInfo(i)"
        >
          <img src="@/assets/images/index/item1.png" class="project_img" />
          <div class="project_text_box marL20">
            <h3 class="project_name fontS26 fonBold">{{ i.prizeTypeName }}</h3>
            <div class="marB28 marT40 fontS20">
              状态:
              <span class="color03 marL20">{{
                i.status | setProjectStatus
              }}</span>
            </div>
            <div class="marB28 fontS20 color7F">
              开始时间:
              <span class="color3 marL20">{{ i.startTime }}</span>
            </div>
            <div class="fontS20 color7F">
              结束时间: <span class="marL20 color3">{{ i.overTime }}</span>
            </div>
          </div>
          <!-- bg -->
          <div class="project_bg posA"></div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <footer>
      <div class="indexFooter fontS14 wBgColor2 wColor">
        Copyright @2021 All
      </div>
    </footer>
  </div>
</template>

<script>
import { getNoticeList, getPrizetypeList, playorderList } from "../api/index";
import baseUrl from "@/api/servers/baseUrl.js";
export default {
  data() {
    return {
      projectList: [], // 项目申报列表
      announcementList: [], // 公告列表-只展示前三条
      bannerList: [],
      baseUrl,
    };
  },
  created() {
    this.getData();
  },
  filters: {
    setCreateTime(e) {
      return e.substring(0, 10);
    },
    setUpdateTime(e) {
      return e.substring(0, 10);
    },
    setProjectStatus(e) {
      return e == 0 ? "未开始" : e == 1 ? "申报中" : "已结束";
    },
  },
  methods: {
    // 获取活动规则说明
    getGuideInfo(){
      // 暂时跳转到省局网页，后期调整为专题页
      window.open("https://gdj.ah.gov.cn/xwzx/tzgg/index.html")
    },
    moreall() {
      this.$router.push({
        name: "Declare",
      });
    },
    getData() {
      const p1 = getNoticeList();
      const p2 = getPrizetypeList();
      const p3 = playorderList();
      Promise.all([p1, p2, p3]).then((res) => {
        this.announcementList = res[0].rows;
        if (res[0].rows.length > 3) {
          // 公告只显示前三条即可，否则会引起样式错乱
          this.announcementList = res[0].rows.slice(0, 3);
        }
        this.projectList = res[1].rows;
        this.bannerList = res[2].rows;
      });
    },
    onChange() {},
    projectInfo(item) {
      console.log(item);
      console.log(sessionStorage.getItem("ToKen"));
      if (sessionStorage.getItem("ToKen") == null) {
        this.$message.error("当前暂未登陆，请先登陆！");
      } else {
        if (item.status == "2") {
          this.$message.error("当前奖项已结束");
        } else if (item.status == "0") {
          this.$message.error("当前奖项未开始");
        } else {
          this.$router.push({
            name: "ProjectDetails",
            query: { id: item.prizeTypeId },
          });
        }
      }
    },
    getNoticeDetail(id) {
      this.$router.push({ name: "NoticeDetails", params: { id } });
    },
    handlePrev() {
      // 通过上边指定的ref 来操作
      this.$refs.carousel.prev();
    },
    handleNext() {
      this.$refs.carousel.next();
    },
  },
};
</script>

<style lang="scss" scoped>
.bannerBox {
  position: relative;
  .icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    // opacity: 0.3;
    z-index: 9;
    cursor: pointer;
  }
  .icons >>> .a-icon {
    width: 25px;
    height: 25px;
  }
}
</style>